<template>
    <!-- <van-nav-bar title="首页" /> -->
    <!-- <van-search
        v-model="value"
        shape="round"
        background="#f50718"
        placeholder="请输入搜索关键词"
    /> -->
    <SearchHome></SearchHome>

    <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <!-- 轮播 -->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="item in bannerList" :key="item.id">
                <img style="height: 150px; width: 100%" :src="item.url" />
            </van-swipe-item>
        </van-swipe>
        <!-- 商品列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <van-card
                v-for="item in list"
                :key="item.id"
                :num="item.putaway"
                :price="item.price"
                :desc="item.detail"
                :title="item.product"
                :thumb="item.picture"
                :origin-price="item.oldprice"
                @click="bindGoodsDetail(item.id)"
            />
        </van-list>
    </van-pull-refresh>
</template>
<!-- ts编程，写代码时，变量指定数据类型，函数参数返回值类型，... 如果没有显示指定，ts类型推论 -->
<script setup lang="ts">
import SearchHome from '@/components/SearchHome.vue';
import { useBanner, useGoods, useGoodsDetail } from '@/hooks/home'

const { bannerList, getBanner } = useBanner()
const { list, loading, finished, refreshLoading, onLoad, onRefresh } =
    useGoods(getBanner)
const { bindGoodsDetail } = useGoodsDetail()
</script>

<style scoped></style>
